<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>First Consult</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		
		//function to check password strength and display progress bar
		$('#password1').keyup(function(){
			var strength = checkStrength($('#password1').val());
			var strengthText = getStrengthText(strength);	
			$('#strengthtext').html("<progress id='strengthprogress' value='" + strength + "' max='100'></progress>  " + strengthText);
		});	
		
		// function to check match in confirm password
		$('#password2').keyup(function(){

			if( $('#password1').val() != $('#password2').val()){
				$("#confirmPwd").html("Passwords doesnot match!");
			}else{
			   $("#confirmPwd").html("Passwords matched!");
		}
		});

	//Function to Check password strength
	function checkStrength(password){
    	var strength = 0;
	   	
	//if password contains 3 UC, 2 LC, 2 sp char - Strenght Normal
	if (password.match(/(?=(.*[A-Z]){3,})(?=(.*[a-z]){2,})(?=(.*[^A-Za-z0-9]){2,}).{7,24}/))  strength = 30
	
	//if password contains 3 Uppercase letters, 2 Lowercase letters and 3-5 special characters, then Password strength - Medium
	if (password.match(/(?=(.*[A-Z]){3,})(?=(.*[a-z]){2,})(?=(.*[^A-Za-z0-9]){3,5}).{7,24}/))  strength = 60 
	
	//if 3 Uppercase letters, 2 Lowercase letters and greater than 5 special characters, then Password strength - Strong
    	if (password.match(/(?=(.*[A-Z]){3,})(?=(.*[a-z]){2,})(?=(.*[^A-Za-z0-9]){6,}).{7,24}/))  strength = 100
	
	return strength;
	}

	//Function to display password strength as Normal/Medium/Strong
	function getStrengthText(strength){	
		if (strength == 30 ) {
			return 'Normal'			
		} else if (strength == 60 ) {
			return 'Medium'		
		} else if (strength == 100) {
			return 'Strong'
		} else {
			return 'Weak'
		}
   }
});
</script>
</head>

<body id="landingBody">
<jsp:include page="Header.jsp" />

<div id="bodyPan">
  <div id="middlePan">
  	<div id="middlebodyPan">
	<h1>User Registration</h1>		
			<form id="contactform" name="contact" method="post" action="Registration">
			  <p class="note"><span class="req">*</span> Asterisk fields are required</p>
			  <div class="row">
				<label for="fname">Name <span class="req">*</span></label>
				<input type="text" name="name" id="name" class="txt" tabindex="1" placeholder="John Mayer" pattern="([A-Za-z]+\s?)*" title="Alphabets only" required autofocus>
			  </div>
			  
			  <div class="row">
				<label for="email">E-mail Address <span class="req">*</span></label>
				<input type="email" name="email" id="email" class="txt" tabindex="2" placeholder="address@domain.com" pattern="[a-zA-Z0-9_.]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,4}" required>
			  </div>
			  
			  <div class="row">
				<label for="age">Age <span class="req">*</span></label>
				<input type="text" name="age" id="age" class="txt" pattern="[0-9]{2}" tabindex="3" title="Digits only" required>
			  </div>
			  
			  <div class="row">
				<label for="sex">Sex <span class="req">*</span></label>
				<input type="radio" name="sex" id="sex" value="male" tabindex="3" required/>Male&nbsp;&nbsp;<input type="radio" id="sex" name="sex" value="female"required/>Female
			  </div>
			  
			  <div class="row">
				<label for="password">Password <span class="req">*</span></label>
				<input type="password" name="password" id="password1" class="txt" tabindex="4" title="Minimum 3 Uppercase, 2 Lowercase, 2 Special Char" pattern="(?=(.*[A-Z]){3,})(?=(.*[a-z]){2,})(?=(.*[^A-Za-z0-9]){2,}).{7,24}" required></textarea>
			  	<div id="strengthtext" style="padding-top:5px;padding-left:125px;"></div>
			  </div>
			  
			  <div class="row">
				<label for="message">Confirm Password <span class="req">*</span></label>
				<input type="password" name="password2" id="password2" class="txt" tabindex="4" placeholder="Password (repeat)" required></textarea>
			  	<div id="confirmPwd" style="padding-left:125px;"></div>
			  </div>
			  
			  <div class="row">
				<label for="message">Unique Code (for Doctors)<span class="req">*</span></label>
				<input type="password" name="password3" id="password3" class="txt" tabindex="4" placeholder="Unique code" ></textarea>
			  </div>
			  
			  <div class="center">
				<input type="submit" id="submitbtn" name="register" tabindex="5" value="Submit">
			 </div>
			  </div>
			 </form>
 	</div>
  </div>
</div>
<jsp:include page="Footer.jsp" />
</body>
</html>